<script setup lang="jsx">
import { ref, onMounted, watch } from 'vue';
import {  dictApi } from "@/api/dict"
import { delayFn } from '@/utils';

const props = defineProps({
  queryFiled: {
    type: String,
    default: 'type'
  },
  queryValue: {
    type: [String, Array],
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
  remote: {
    type: Boolean,
    default: true
  },
  valueFiled: {
    type: String,
    default: 'value'
  },
})

const  options = ref([])
const loading = ref(false)
const init = async () => {
  if (!props.remote) {
    return
  }
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    const res = await dictApi(
      { [props.queryFiled]: props.queryValue },
      {},
    )
    options.value = res?.map((item) => ({ ...item, value: item[props.valueFiled]}))
  } catch (error) {}
  await delayFn()
  loading.value = false
}

watch(() => props?.data, (vals) => {
  if (props.remote) {
    return
  }
  options.value = vals
})

onMounted(init)
</script>

<template>
  <el-select
    placeholder="请选择"
    style="width: 100%"
    class="select-dict-wrapper"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<style scoped>
  .select-dict-wrapper {

  }
</style>
